<template>
  <div class="wrap">
    <van-row>
      <van-col span="8" :style="colorCalc($attrs.p1)">{{ $attrs.p1 }}</van-col>
      <van-col span="8" :style="colorCalc($attrs.p2)">{{ $attrs.p2 }}</van-col>
      <van-col span="8" :style="colorCalc($attrs.p3)">{{ $attrs.p3 }}</van-col>
    </van-row>
    <van-row>
      <van-col span="8" :style="colorCalc($attrs.p4)">{{ $attrs.p4 }}</van-col>
      <van-col span="8">
        <div style="font-size: 17px;"><slot name="center" /></div>
      </van-col>
      <van-col span="8" :style="colorCalc($attrs.p6)">{{ $attrs.p6 }}</van-col>
    </van-row>
    <van-row>
      <van-col span="8" :style="colorCalc($attrs.p7)">{{ $attrs.p7 }}</van-col>
      <van-col span="8" :style="colorCalc($attrs.p8)">{{ $attrs.p8 }}</van-col>
      <van-col span="8" :style="colorCalc($attrs.p9)">{{ $attrs.p9 }}</van-col>
    </van-row>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },

  mounted() {},

  methods: {
    colorCalc(str) {
      if (/天|延|生/.test(str)) {
        return {
          color: "#52c41a",
          fontWeight: "bold"
        };
      }
      if (/五|六|绝|祸/.test(str)) {
        return {
          color: "#ff4d4f"
        };
      }
      return {
        color: "#1890ff"
      };
    }
  }
};
</script>
<style>
.wrap {
  width: 100%;
}
.wrap .van-col {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  border: 1px solid #ccc;
  height: 11vw;
  font-size: 25px;
}
.wrap .van-row {
  width: 100%;
}
</style>
